<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div> {{msg}}</div>
        <div v-text="msg"></div>
        <!-- v-html ：存在安全问题 -->
        <div v-html="msg1"></div>
        <!-- v-pre:  显示原始信息，跳过vue编译过程-->
        <div v-pre>{{msg}}</div>
        <!-- v-once: 只编译一次，显示内容后不再具有响应式功能 -->
        <div v-once>{{msg2}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        /**
         * 响应式： 
         *  html5中的响应式：屏幕尺寸的变化导致样式的变化
         * 数据响应式：数据的变化导致页面内容的变化
         */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "hello vue",
                msg1: "<h1>hello vue</h1>",
                msg2: "v-once",
            }
        })
    </script>
</body>

</html>